<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-28 16:33:25
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-28 21:49:47
--> 
<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-28 12:34:28
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-28 13:15:37
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <p><label for="">用户名</label><input type="text" id="userName"> <span id="alert_name"></span></p> 
    <p><label for="">手机号</label><input type="text" id="phone"><span id="alert_phone"></span></p>
    <p><label for="">密码</label><input type="password" id="passWord"><span id="alert_password"></span></p>
    
    <script>
        var userName = document.querySelector("#userName");
        var phone = document.querySelector("#phone");
        var password = document.querySelector("#passWord"); 
        var reg_phone =/^1[3,5,6,7,8,9]\d{9}$/;
       var reg_userName = /^([a-z][A-Z]){3,7}[\u4e00-\u9fa5]{3,7}}$/;
        var reg_password = /^([0-9]|[a-z]|[A-Z]|\.){8,14}$/
        userName.onblur =()=>{
            
            if(reg(reg_userName,userName.value)){
                alert_name.style.color="green";
              alert_name.innerHTML='用户名正确'
            }else{
                alert_name.style.color="red";
                alert_name.innerHTML='用户名只能最多7个汉字 或者 14个英文字母 '
            }
        }
        phone.onblur =()=>{
            if(reg(reg_phone,phone.value)){
                alert_phone.style.color="green";
              alert_phone.innerHTML='手机号码正确'
            }else{
                alert_phone.style.color="red";
                alert_phone.innerHTML='手机号码错误'
            }
        }
        password.onblur =()=>{
            if(reg(reg_password,password.value)){
                alert_password.style.color="green";
                alert_password.innerHTML='密码设置正确'
            }else{
                alert_password.style.color="red";
                alert_password.innerHTML='密码设置错误'
            }
        }
       function reg(reg,reg_query){
        if(reg.test(reg_query)){
            return true
        }else{
            return false;
        }
       }
    </script>
</body>
</html>